<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>商城-购物车</title>

  <link rel="stylesheet" type="text/css" th:href="@{/static/lib/layui-v2.6.3/css/layui.css}"/>
  <script type="text/javascript" th:src="@{/static/lib/jquery-3.4.1/jquery-3.4.1.min.js}"></script>
  <script type="text/javascript" th:src="@{/static/lib/layui-v2.6.3/layui.js}"></script>
    <!--模板样式-->
    <link th:href="@{/static/assets/css/amazeui.css}" rel="stylesheet" type="text/css" />
    <link th:href="@{/static/basic/css/demo.css}" rel="stylesheet" type="text/css" />
    <link th:href="@{/static/css2/cartstyle.css}" rel="stylesheet" type="text/css" />
    <link th:href="@{/static/css2/optstyle.css}" rel="stylesheet" type="text/css" />
    <script type="text/javascript" th:src="@{js2/jquery.js}"></script>
</head>
<body>
<div class="am-container header">
    <ul class="message-l">
        <div class="topMessage">
            <div class="menu-hd">
                <a href="/login1/login" target="_top" class="h">亲，请登录</a>
                <a href="/login1/enroll" target="_top">免费注册</a>
            </div>
        </div>
    </ul>
    <ul class="message-r">
        <div class="topMessage home">
            <div class="menu-hd"><a href="/user/main" target="_top" class="h">省多多商城</a></div>
        </div>
        <div th:onclick="myAccount([[${userPhone}]])" class="topMessage my-shangcheng">
            <div class="menu-hd MyShangcheng"><a target="_top"><i class="am-icon-user am-icon-fw"></i>[[${userPhone}]]</a></div>
        </div>
        <div class="topMessage mini-cart">
            <div class="menu-hd"><a id="mc-menu-hd" href="/cart/list" target="_top"><i class="am-icon-shopping-cart  am-icon-fw"></i><span>购物车</span><strong id="J_MiniCartNum" class="h">0</strong></a></div>
        </div>
        <div class="topMessage favorite">
            <div class="menu-hd"><a href="/myOrder/list" target="_top"><i class="am-icon-heart am-icon-fw"></i><span>我的订单</span></a></div>
        </div>
    </ul>
</div>
<!--悬浮搜索框-->
<div class="nav white">
    <div class="logo"><img th:src="@{/static/images2/logo.png}" /></div>
    <div class="logoBig">
        <li><img th:src="@{/static/images2/logobig.png}"/></li>
    </div>
</div>
<div class="clear"></div>


<form id="ffff" action="list" method="post" class="layui-form">
    <div class="layui-form-item" style="display: inline-block;width: 300px;">
        <label class="layui-form-label">商品名查询:</label>
        <div class="layui-input-block">
            <input type="text" name="goodsName" placeholder="商品名查询" th:value="${orderGoods.goodsName}"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item"
         style="display: inline-block; margin-top: 10px; position: relative; left: -20px; width: 300px;">
        <label class="layui-form-label">分类查询:</label>
        <div class="layui-input-block">
            <select name="orderStatus" lay-verify="required">
                <option value="">商品分类</option>
                <option value="1" th:selected="${orderGoods.orderStatus eq 1}">待付款</option>
                <option value="2" th:selected="${orderGoods.orderStatus eq 2}">待发货</option>
                <option value="3" th:selected="${orderGoods.orderStatus eq 3}">已发货</option>
                <option value="4" th:selected="${orderGoods.orderStatus eq 4}">已签收</option>
                <option value="5" th:selected="${orderGoods.orderStatus eq 5}">退款中</option>
                <option value="6" th:selected="${orderGoods.orderStatus eq 6}">已退款</option>
                <option value="7" th:selected="${orderGoods.orderStatus eq 7}">交易结束</option>
            </select>
        </div>
    </div>
    <button id="btn1" type="submit" class="layui-btn" style="display: inline-block; left: 10px;">查询</button>
</form>
<table class="layui-table">
    <thead>
    <tr>
        <th>订单号</th>
        <th>商品图片</th>
        <th>商品名</th>
        <th>单价</th>
        <th>数量</th>
        <th>总价</th>
        <th>订单状态</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <span th:each="order:${pageInfo.list}">
    <tr>
        <td><span th:text="${order.orderNo}"></span></td>
        <td><img th:src="'http://localhost:8887/'+ ${order.goodsImgUrl}" width="100px" height="100px"/></td>
        <td><p th:text="${order.goodsName}"></p></td>
        <td><span th:text="${order.goodsPrice}"></span></td>
        <td><span th:text="${order.buyCount}"></span></td>
        <td><span th:text="${order.totalMoney}"></span></td>
        <td th:if="${order.orderStatus eq 1}">待付款</td>
        <td th:if="${order.orderStatus eq 2}"style="color:#0000FF" >待发货</td>
        <td th:if="${order.orderStatus eq 3}">已发货</td>
        <td th:if="${order.orderStatus eq 4}">已签收</td>
        <td th:if="${order.orderStatus eq 5}" style="color:red">退款中</td>
        <td th:if="${order.orderStatus eq 6}">已退款</td>
        <td th:if="${order.orderStatus eq 7}">交易结束</td>
         <td>
             <button th:if="${order.orderStatus eq 2}" th:onclick="refund([[${order.orderNo}]])" class="layui-btn">退款</button>
             <button th:if="${order.orderStatus eq 1}" th:onclick="del([[${order.orderNo}]])" class="layui-btn layui-btn-danger">删除订单</button>
             <button th:if="${order.orderStatus eq 6}" th:onclick="del([[${order.orderNo}]])" class="layui-btn layui-btn-danger">删除订单</button>
             <button th:if="${order.orderStatus eq 7}" th:onclick="del([[${order.orderNo}]])" class="layui-btn layui-btn-danger">删除订单</button>
        </td>
    </tr>
    </span>
    </tbody>
</table>
<div style="text-align:center;">
    <button class="layui-btn" onclick="jump(1)">首页</button>
    <button class="layui-btn" th:onclick="jump([[${pageInfo.pageNum-1}]])">上一页</button>
    <span th:text="${pageInfo.pageNum} + '/' + ${pageInfo.pages} + '页'"></span>
    <button class="layui-btn" th:onclick="jump([[${pageInfo.pageNum+1}]])">下一页</button>
    <button class="layui-btn" th:onclick="jump([[${pageInfo.pages}]])">尾页</button>
</div>
</body>
    <script>
	layui.use(['layer', 'jquery', 'form'], function() {
			var layer = layui.layer;
			var $ = layui.jquery;
			var form = layui.form;
			form.render('select'); //表单渲染，得渲染才会有效果显示出来
		})
    function jump(pageNum) {
        var params = $("#ffff").serialize();
			var url = "list?" + params + "&pageNum=" + pageNum;
			window.location.href = url;
		}
		function del(orderNo){
		$.ajax({
					url: "/myOrder/del?orderNo="+orderNo,
					type: "post",
					//请求发送完之后的回调函数
					success: function(info) {
						if (info == 1) {
							alert("删除成功！");
						} else {
							alert("删除失败！");
						}
						var index = parent.layer.getFrameIndex(window.name);
						parent.layer.close(index);
						//刷新父类页面
						window.parent.location.reload();
					}
				})
		}
	   function refund(orderNo){
		$.ajax({
					url: "/myOrder/refund?orderNo="+orderNo,
					type: "post",
					//请求发送完之后的回调函数
					success: function(info) {
						if (info == 1) {
							alert("等待商家确认！");
						} else {
							alert("退款失败！");
						}
						var index = parent.layer.getFrameIndex(window.name);
						parent.layer.close(index);
						//刷新父类页面
						window.parent.location.reload();
					}
				})
		}
</script>
</html>